<#assign pn = 1 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>我的学习记录</title>
    <meta name="baidu-site-verification" content="code-xEvBW4PmsD" />
    <meta name="keywords" content="TopClass,java,python,anaconda,视频教程,ssm,SpringBoot,SpringCloud,Redis" />
    <meta name="description" content="TopClass：专注年轻人的IT在线教育平台，包含：java全套技术教程，微服务架构课程。" />

    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link href="http://res.itsub.cn/lib/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://res.itsub.cn/lib/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://res.itsub.cn/lib/swiper/6.8.4/swiper-bundle.min.css"><script src="http://res.itsub.cn/lib/swiper/6.8.4/swiper-bundle.min.js"> </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/index.css">
    <style>

    </style>

</head>
<body>

<!--导航栏-->

<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"K3tnRPA99GPSFibA",ck:"K3tnRPA99GPSFibA"})</script>

<#include "navbar.ftl">

<!--大轮播-->
<style>

    /* [linear='0']{
        background: linear-gradient(to bottom, rgba(255,192,42,0.8) -30%, rgba(225, 225, 225, 0) 40%);
    }
    [linear='1']{
        background: linear-gradient(to bottom, rgba(172,34,33,0.8) -30%, rgba(225, 225, 225, 0) 40%);
    }
    [linear='2']{
        background: linear-gradient(to bottom, rgba(39,124,251,0.8) -30%, rgba(225, 225, 225, 0) 40%);
    } */

</style>
<div class="subject banner">
    <div class="v-container">
        <div class="wrapper">
            <div id="lb" class="lbox">
                <ul>
                    <#list categoryList as cc>
                        <li>${cc.name}</li>
                    </#list>


                </ul>
                <div class="panel">
                    <#list categoryList as cc>
                        <div class="panel-item">
                            <h5>${cc.name}</h5>
                            <#list cc.children as ccc>
                                <a href="">${ccc.name}</a>
                            </#list>
                        </div>
                    </#list>


                </div>
            </div>
            <div class="rbox swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="" target="_blank"><img src="/images//banner_1.jpeg"></a></div>
                    <div class="swiper-slide"><a href="" target="_blank"><img src="/images/banner_2.jpeg"></a></div>
                    <div class="swiper-slide"><a href="" target="_blank"><img src="/images/banner_3.jpeg"></a></div>
                    <div class="swiper-slide"><a href="" target="_blank"><img src="/images/banner-alibabacloud.png"></a></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</div>

<!-- 服务体系 -->
<div class="service">
    <div class="container">
        <div class="intro">开云教育独创一流售后服务体系 全新的服务体系，步步提升自己</div>
        <ul>
            <li>
                <img src="img/icon/c.png" alt="">
                <span>路线指导</span>
            </li>
            <li>
                <img src="img/icon/mszd.png" alt="">
                <span>面试指导</span>
            </li>
            <li>
                <img src="img/icon/vip.png" alt="">
                <span>视频会员</span>
            </li>
            <li>
                <img src="img/icon/e.png" alt="">
                <span>行业定位</span>
            </li>
            <li>
                <img src="img/icon/mszd.png" alt="">
                <span>面试指导</span>
            </li>
            <li>
                <img src="img/icon/f.png" alt="">
                <span>课程升级</span>
            </li>
            <li>
                <img src="img/icon/b.png" alt="">
                <span>就业内推</span>
            </li>
            <li>
                <img src="img/icon/jynt.png" alt="">
                <span>专家带队</span>
            </li>
            </li>
        </ul>
    </div>
</div>

<style>

</style>

<div id="app">
    <div class="course-block container" style="height: 280px;">
        <div class="chead">
            <span class="yc"><span></span></span>
            <span>热门学科</span>
            <span>就业大课，随时学习</span>
        </div>
        <div class="s-col" v-for="(s,n) in subjectArr" :key="n" @click="onSubjectClick(s)">
            <div class="subject-col" :style="{background:s.bg}">
                <div class="sname">{{ s.name }}</div>
                <div class="intro">{{ s.intro }}</div>
            </div>
        </div>

    </div>

</div>

<div class="footer" id="footer">
    <div class="links">
        <div class="container">
            <h5>拒绝躺平，努力奋斗。</h5>
            <h5></h5>
        </div>
    </div>
    <div class="copyright">
        <div class="container">
            <div style="text-align: center;"><a href="https://beian.miit.gov.cn/">京ICP备20019874号-1</a></div>
            <div style="text-align: center;">
                Copyright© 2020~2030 我的学习记录 | QQ群: 828833313
                <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=nerz4pEJLaA5KuiZSjm0cq8oOKr_NfjB&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="IT技术学习群" title="IT技术学习群"></a>
            </div>
        </div>
    </div>

</div>
<div style="display: none">
    <script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280775758&web_id=1280775758"></script></div>
<style>
    /*.footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }*/
    .footer .links{
        background: #2e2e2e;
        padding: 50px 0;
        border-bottom: 1px solid #111;
        color:#eeeeee;
    }
    .footer .copyright{
        background: #212121;
        border-top: 1px solid #444;
        text-align: center;
        padding: 20px 0;
        line-height: 30px;
        color: #c1c1c1;
    }
</style>
<script>
    /*function onResize(){
        //如果网页高度大于屏幕高度
        if($(document).height() > $(window).height()) {
            //设置底部的margin-top为0
            $(".footer").css('position', 'static');
            console.log("1");
        } else {
            //设置底部的margin-top为负值
            $(".footer").css('position', 'fixed');
            console.log("2");
        }
    }
    $(function () {

        $(window).resize(onResize);
        onResize();
    })*/
    console.log($("#footer").offset());
    console.log($(window).height());
    var fo = $("#footer");
    var winh = $(window).height();
    if (fo.offset().top + 211 < $(window).height()) {
        fo.offset({top: winh - 211});
    }
</script>
<script>


    $('.course').click(function () {
        $(this).find('a')[0].click();
    });

    $(function(){

        var swiper = new Swiper('.swiper-container', {
            autoplay:true,
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on:{
                slideChange: function(e){
                    /* var arr = this.slides;
                    var node = $(arr[this.realIndex+1]);
                    var css = 'background:linear-gradient(to bottom, '+node.attr('color')+' -30%, rgba(225, 225, 225, 0) 40%);';
                    console.log(css);
                    $('.banner').attr('style',css); */
                    $('.banner').attr('linear',this.realIndex);
                },
                click: function(){
                    //var node = $(this.slides[this.realIndex+1]);
                    //window.open(node.attr('href'),'_blank');
                },
            },
        });


        var lb = $('#lb');
        var lis = $('#lb ul li');
        $.each(lis,function (i,el) {
            //console.log(i,el);
            var e = $(el);
            var p = lb.find('.panel');
            e.mouseenter(function () {
                p.attr('xopen','1');
                p.show();
                lb.find('.panel > div').hide().eq(i).show();
            });
            p.mouseenter(function () {
                p.attr('xopen','1');
            });

            var fun2 = function () {
                p.attr('xopen','0');
                setTimeout(function () {
                    if (p.attr('xopen') == 0) {
                        p.hide();
                    }
                },5);
            }
            e.mouseleave(fun2);
            p.mouseleave(fun2);
        })
    });


    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            subjectArr:[
                {name:'Java',intro:'后端架构师成长之路',href:'http://itsub.cn',bg:'linear-gradient(rgb(100, 206, 255) 0%, rgb(90, 156, 255) 100%)'},
                {name:'前端',intro:'前端小白的基础启蒙',href:'http://itsub.cn',bg:'linear-gradient(rgb(130, 223, 219) 0%, rgb(91, 205, 179) 100%)'},
                {name:'Python',intro:'年度最热门语言',href:'http://itsub.cn',bg:'linear-gradient(rgb(116, 205, 231) 0%, rgb(38, 174, 214) 100%)'},
                {name:'测试',intro:'从小白到高级测试工程师',href:'http://itsub.cn',bg:'linear-gradient(rgb(164, 160, 255) 0%, rgb(115, 109, 255) 100%)'},
                {name:'游戏开发',intro:'零基础游戏开发必学',href:'http://itsub.cn',bg:'linear-gradient(rgb(184, 138, 255) 0%, rgb(155, 90, 255) 100%)'},
            ]
        },
        mounted() {

        },
        methods: {
            onSubjectClick(s) {
                window.location.href=s.href;
            }
        }
    })

</script>
</body>
</html>